<template>
	<view>
		<u-navbar placeholder fixed autoBack title="搜索"></u-navbar>
		<view class="search u-border-bottom d-p-l-30 d-p-r-30 d-p-t-20 d-p-b-20 d-flex">
			<view class="input d-flex d-flex-1">
				<u-icon name="search" size="38rpx" color="#ADB4BD"></u-icon>
				<view class="d-flex-1"><u--input v-model="keyword" border="none" style="padding: 0;height: 75rpx;" placeholder="请输入班组长或班组名称进行查询"></u--input></view>
			</view>
			<u-button text="搜索" @click="init" type="primary" :customStyle="{ width: '136rpx', height: '75rpx', marginLeft: '20rpx' }"></u-button>
		</view>
		<u-gap height="115rpx" bgColor="#ffffff"></u-gap>

		<view class="d-p-30">
			<template v-for="(item, index) in list">
				<view class="card d-flex d-p-30 d-m-b-30" :key="index">
					<view class="d-flex-1">
						<view class="d-flex" style="color: #5D6672;">
							<view class="d-font-24" style="flex: 3;">
								<text style="">单位状态</text>
								<text class="d-m-l-20" style="color: #162233;">{{ item.ywzt | _ywzt }}</text>
							</view>
							<view class="d-font-24" style="flex: 3;">
								<text style="">班组名称</text>
								<text class="d-m-l-20" style="color: #162233;">{{ item.bzmc }}</text>
							</view>
						</view>
						<view class="d-flex d-m-t-20" style="color: #5D6672;">
							<view class="d-font-24" style="flex: 3;">
								<text style="">所属单位</text>
								<text class="d-m-l-20" style="color: #162233;">{{ item.deptName }}</text>
							</view>
							<view class="d-font-24" style="flex: 3;">
								<text style="">办理时间</text>
								<text class="d-m-l-20" style="color: #162233;">{{ $moment(item.createTime).format('YYYY-MM-DD') }}</text>
							</view>
						</view>
						<!-- 没有这个字段 -->
						<!-- <view class="d-flex d-m-t-20" style="color: #5D6672;">
							<view class="d-font-24" style="flex: 3;">
								<text style="">班组人数</text>
								<text class="d-m-l-20" style="color: #162233;">0人</text>
							</view>
						</view> -->
					</view>
				</view>
			</template>
			<template v-if="list.length <= 0">
				<view style="padding: 10vh;"><u-empty icon="/static/image/none.png" :text="!show ? '请输入内容进行搜索' : '暂无数据'"></u-empty></view>
			</template>
		</view>
	</view>
</template>

<script>
import { gafferlist } from '../../../common/api.js';
export default {
	data() {
		return {
			keyword: '',
			pageNum: 1,
			pageLast: 1,
			pageSize: 20,
			list: [],
			show: false
		};
	},
	filters: {
		_ywzt(e) {
			return ['办结', '未提交', '注销', '审批中'][e];
		}
	},
	onReachBottom() {
		if (this.pageLast > this.pageNum) {
			++this.pageNum;
			this.getData().then(e => {
				this.list = this.list.concat(e.data);
			});
		}
	},
	methods: {
		init() {
			if (!this.keyword) {
				return uni.$u.toast('请输入班组长或班组名称进行查询');
			}
			this.show = false;
			this.pageNum = 1;
			this.getData().then(e => {
				this.show = true;
				this.list = e.data;
				this.pageLast = Math.ceil(e.total / this.pageSize);
			});
		},
		getData() {
			return gafferlist({
				params: {
					pageNum: this.pageNum, //	当前页【必传】
					pageSize: this.pageSize, //     每页条数【必传】
					deptId: this.$user.ssgcxx[this.$appIndex].deptId, //    所属部门编号【必传】
					gcbh: this.$user.ssgcxx[this.$appIndex].gcbh, // 项目业务编号【必传】
					keyWord: this.keyword //关键字(按照“班组名称”、“班组长”全模糊查询)【非必传】
				}
			});
		}
	}
};
</script>

<style lang="scss">
.search {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 999;
	background-color: #ffffff;
	.input {
		height: 75rpx;
		background: #f6f7f8;
		border-radius: 10rpx;
		padding: 0 20rpx;
	}
}
.card {
	box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.05);
	border-radius: 10rpx;
	background-color: #ffffff;
}
page {
	background-color: #fbfcfc;
}
</style>
